<template>
  <div class="page-fs">
    <a-row class="page-fs">
      <a-col :span="4">
        <div
          ref="stencilContainer"
          class="page-fs"
        />
      </a-col>
      <a-col :span="20">
        <div
          id="container"
          ref="container"
        />
      </a-col>
      <NodeConfig
        ref="nodeConfig"
        width="60%"
        :node-data="nodeData"
      />
    </a-row>
    <div
      class="position-absolute"
      style="bottom: 20px; right: 20px;"
    >
      <AButton
        style="margin-right: 20px;"
        @click="close"
      >
        取消
      </AButton>
      <AButton
        type="primary"
        @click="submit"
      >
        保存
      </AButton>
    </div>
  </div>
</template>

<script>
import UtilGraph from "./util-graph/UtilGraph"
import UtilAddon from './util-graph/addon/UtilAddon'
import NodeConfig from "./NodeConfig"
import UtilAnt from '@/config/frame/ant/util/util-ant'
import UtilAxios from '@/util/util-axios'
const processApi = UtilAxios.initBaseApi('process', 'template')

let graph
export default {
  components: {NodeConfig},
  props: {
    dataForm: {
      type: Object,
      required: true
    },
    close: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      UtilGraph,
      nodeData: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      graph = UtilGraph.init(this.$refs.container)
      UtilGraph.initOnNodeConfigEventListen((data) => {
        this.nodeData = data
        this.$refs.nodeConfig.open()
      })
      UtilGraph.initData(JSON.parse(this.dataForm.processConfig))
      UtilAddon.initStencil(this.$refs.stencilContainer, graph)
    })
  },
  methods: {
    submit() {
      const subForm = this.dataForm
      subForm.processConfig = JSON.stringify(UtilGraph.toJson())
      processApi.edit(subForm).then(UtilAnt.msg)
      this.close()
    }
  }
}
</script>

<style scoped>

</style>